<script setup lang="ts">
import { ref } from "vue";
import { $singleMsg } from "@plugins/utils/element";

interface PropType {
  isDoc?: boolean; // 是否为文档系统
}

withDefaults(defineProps<PropType>(), {
  isDoc: false,
});

const countBase = ref(0);
const handleClickBase = (message) => {
  countBase.value++;
  $singleMsg({
    message: `${message} - ${countBase.value}`,
    type: "success",
  });
};

const countDebounce = ref(0);
const handleClickDebounce = (message) => {
  countDebounce.value++;
  $singleMsg({
    message: `${message} - ${countDebounce.value}`,
    type: "success",
  });
};
</script>

<template>
  <div class="page-container w-full h-full">
    <xt-row>
      <xt-col :xs="24" :md="12" :lg="isDoc ? 12 : 8">
        <xt-card class="card-container" header="基础">
          <xt-button :debounce="0" @click="handleClickBase('base')"
            >基础</xt-button
          >
        </xt-card>
      </xt-col>

      <xt-col :xs="24" :md="12" :lg="isDoc ? 12 : 8">
        <xt-card class="card-container" header="Loading 状态">
          <xt-button type="warning" :debounce="0" :loading="true"
            >基础</xt-button
          >
        </xt-card>
      </xt-col>

      <xt-col :xs="24" :md="12" :lg="isDoc ? 12 : 8">
        <xt-card class="card-container" header="防抖">
          <xt-button type="success" @click="handleClickDebounce('debounce')"
            >防抖</xt-button
          >
        </xt-card>
      </xt-col>
    </xt-row>
  </div>
</template>

<style lang="scss">
.page-container {
  .card-container {
    @apply m-[10px];
  }
}
</style>
